<!--  -->
<template>
	<div id="costomdiv">
		<div v-for="item in customdivList" :key="item.id">
			<div class="customdiv" :style="getCustomDivStyle(item)">
				<div
					@mouseover="handleMouseOverOnPoint"
					@mousedown="handleMouseDownOnPoint($event,item)"
					:style="getPointStyle()"
				></div>
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
	name: 'customdiv',
	data() {
		return {
		};
	},
	computed: {
		...mapState([
			"customdivList"
		])
	},
	methods: {
		...mapMutations([
			'setCustomDivWidth'
		]),
		getCustomDivStyle(item) {
			const result = {}
			result['width'] = item.width + 'px'
			result['height'] = item.height + 'px'
			return result
		},
		//右边栏滑动改变大小
		handleMouseDownOnPoint(e,item) {
			e.stopPropagation()
			e.preventDefault()
			const startX = e.clientX
			const width = item.width
			const move = (moveEvent) => {
				let currX = moveEvent.clientX
				if(currX>document.documentElement.clientWidth){
					currX = document.documentElement.clientWidth
				}
				//计算滑动的距离
				const disX = currX - startX 
				const newWidth = width + disX
				this.setCustomDivWidth({newWidth})
			}
			const up = () => {
				document.removeEventListener('mousemove', move)
				document.removeEventListener('mouseup', up)
			}

			document.addEventListener('mousemove', move)
			document.addEventListener('mouseup', up)

		},
		getPointStyle() {
			const style = {
				width: "1px",
				height: "100%",
				position: "absolute",
				right: 0,
				top: 0,
				zIndex: 100,
				cursor: "ew-resize",
				borderRightStyle: "dashed",
				borderRightColor: "#ccc"
			}
			return style
		},
		//鼠标经过
		handleMouseOverOnPoint() {
			console.log('123')
		}
	}
}

</script>
<style lang='scss' scoped>
#costomdiv {
	position: absolute;
	.customdiv {
		overflow: auto;
	}
	.shape {
		position: absolute;
		border: 1px solid #ccc;
		&:hover {
			cursor: move;
		}
	}
	.active {
		outline: 1px solid #70c0ff;
		user-select: none;
	}
	.shape-point {
		position: absolute;
		background: #fff;
		border: 1px solid #59c7f9;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		z-index: 1;
	}
}
</style>